<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

    </div>
    <script>
        // vue是根据MVVM架构思想设计的，MVVM又是基于MVC设计模式的一次演化
        //M模型层，管数据的
        const data = {
            count: 1
        }
        // VM视图模型层，连接模型层和视图层的
        // vue2中使用defineProperty使用属性劫持实现数据响应式
        // vue3中使用Proxy代理实现数据响应式
        // 返回值 = Proxy（参数一，参数二）
        // 参数一：被代理的对象
        // 参数二：配置项
        // 返回值：被代理后的新对象
        // const ProxyData = new Proxy(data, {
        //     // getter操作
        //     get(target, key) {
        //         return target[key]
        //     },
        //     // setter操作
        //     set(target, key, value) {
        //         console.log(target, key, value);

        //         target[key] = value
        //         // 通知试图更新
        //         watch()

        //     }
        // })
        // vue中声明了一个方法defineReactive专门来实现响应式
        function defineReactive(data) {
            return new Proxy(data, {
                // getter操作
                get(target, key) {
                    return target[key]
                },
                // setter操作
                set(target, key, value) {
                    console.log(target, key,value);
                    target[key] = value
                    // 通知试图更新
                    watch()

                }
            })
        }
        const ProxyData = defineReactive(data)




        function watch() {
            render();
        }

        // V视图层，渲染视图的
        function render() {
            app.innerHTML = `
             <p>${ProxyData.count}</p>
            <button id='btn'>+</button>
            `
        }
        render();
        document.body.addEventListener('click', e => {
            if (e.target.id === 'btn') {
                // 修改代理后的数据触发setter
                ProxyData.count++
            }
        })



    </script>
</body>


</html>